<style scoped>
  h2{
    text-align: center;
    padding: 30px;
    font-size: 18px;
  }
  .chart_example{
    width: 60%;
    height: 200px;
    border: 1px solid red;
    margin: 0 auto;
  }
   h1{
    text-align: center;
    padding: 30px;
    font-size: 18px;
  }
</style>
<template>
  <div>
      <div class="title" >
            <h1>{{stitle}}</h1>
      </div>
     <div v-for="(item, index) in list" :key="index">
       <!-- <h2 v-if="item.type!=3">vue中插入Echarts示例</h2> -->
        <h2 v-if="item.type!=3">{{index+1}}、{{item.price.name}}</h2>
        <div class="chart_example">
        </div>
    </div>
  </div>
</template>
 
<script>
import axios from 'axios'
import echarts from 'echarts'
  export default {
    data() {
      return {
        list:[ // 假数据
        {
          id:1,
          price:{
            name:'项目一',
            resData:[
              {name:'订购费用',value:12},
              {name:'饲养费用',value:18},
              {name:'实验费用',value:8},
              {name:'其他费用',value:10},
            ]
          }
        },{
          id:2,
          price:{
            name:'项目二',
            resData:[
              {name:'订购费用',value:18},
              {name:'饲养费用',value:10},
              {name:'实验费用',value:20},
              {name:'其他费用',value:9},
            ]
          }
        },
        {
          id:3,
          price:{
            name:'项目三',
            resData:[
              {name:'订购费用',value:18},
              {name:'饲养费用',value:10},
              {name:'实验费用',value:20},
              {name:'其他费用',value:9},
            ]
          }
        },
        {
          id:4,
          price:{
            name:'项目四',
            resData:[
              {name:'订购费用',value:18},
              {name:'饲养费用',value:10},
              {name:'实验费用',value:20},
              {name:'其他费用',value:9},
            ]
          }
        },
        {
          id:5,
          price:{
            name:'项目五',
            resData:[
              {name:'订购费用',value:18},
              {name:'饲养费用',value:10},
              {name:'实验费用',value:20},
              {name:'其他费用',value:9},
            ]
          }
        }
      ],


      list1:[
        {"id":26,
        "optionData":
        [
          {"count":6,"id":12,"optionName":"可以","questionId":26},
        {"count":4,"id":13,"optionName":"不可以","questionId":26}
        ],
        "order":2,
        "questionName":"做软件测试可以嘛？",
        "questionnaireId":6,
        "required":2,
        "type":1
        },
        {"id":27,"optionData":[{"count":6,"id":14,"optionName":"要","questionId":27},{"count":4,"id":15,"optionName":"不要","questionId":27}],"order":2,"questionName":"要进我们公司嘛","questionnaireId":6,"required":2,"type":1},{"id":28,"optionData":[{"count":6,"id":16,"optionName":"很好","questionId":28},{"count":4,"id":17,"optionName":"一般般吧","questionId":28},{"count":2,"id":18,"optionName":"还行","questionId":28}],"order":2,"questionName":"你好嘛","questionnaireId":6,"required":2,"type":2},{"id":29,"optionData":[],"order":2,"questionName":"你是谁","questionnaireId":6,"required":2,"type":3}],
      stitle:sessionStorage.getItem('stitle')  
    }
    },
    mounted() {
      let _this = this;


        axios({
            url:'/questionnaireContent/?questionnaireId='+this.$route.query.id,
            method:'get',
        }).then(function(resp){
            //console.log('444'+resp)
            const data1=JSON.stringify(resp.data.data)
          //  console.log('333'+typeof(data1))
            console.log('222'+data1)
            const jsonObj =JSON.parse(data1)
            var arr=[];
            for(let i in jsonObj){
                arr.push(jsonObj[i])
            }

        const echarts = require('echarts');
       // console.log()
        let chart_examples=document.getElementsByClassName('chart_example')
        for(let i=0;i<chart_examples.length;i++){
        let myChart = echarts.init(chart_examples[i]);
        const a=[]
        if(resp.data.data.type!=3){
        console.log('555'+JSON.stringify(resp.data.data[i].optionData))
        }


        // console.log(JSON.stringify(resp.data.data[i].optionData)+'300')

        // arr.forEach(element=>{
        //       console.log(JSON.stringify(element)+'999')
        // })
        // console.log(JSON.stringify(arr)+'100')
        // const ndata=JSON.stringify(arr.optionData)
        // for(let i=0;i<ndata.length;i++){
        //   console.log(ndata[i]) 
        // }

        let option={
          color: ['#f44'],
          tooltip : {
          trigger: 'axis',
          axisPointer : {
            type : 'shadow'
          }
        },

        xAxis : [
          {
            type : 'category',
          //  data : ['订购费用', '饲养费用', '实验费用', '其他费用'],
             data : JSON.stringify(resp.data.data[i].optionData.optionName),
             
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
						interval: 0,    //强制文字产生间隔
					    rotate: -30,     //文字逆时针旋转45°
					   },
          }
        ],
        yAxis : [
          {
            type : 'value'
          }
        ],
        series : [
          {
            // name:'每月花费',
            name:'',
            type:'bar',
            barWidth: '60%',
            // data:_this.list[i].price.resData,
            data:{name:JSON.stringify(resp.data.data[i].optionData.optionName),value:JSON.stringify(resp.data.data[i].optionData.optionName)},
          }
        ]

      }

      myChart.setOption(option);
            //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
        window.addEventListener('resize',function() {myChart.resize()});  
        } 

      }
      )

      
    },
    methods: {
       getTitle(){
            const _this=this
            axios({
                // url:'http://uchiha.vip:5000/questionnaire/?id='+this.$route.query.id,
                url:'/questionnaire/?id='+this.$route.query.id
            }).then(function(resp){
                _this.stitle=resp.data.data[0].questionTitle
                sessionStorage.setItem('stitle',resp.data.data[0].questionTitle)
            })
        },

        getdata(){
                  axios({
                  url:'/questionnaireContent/?questionnaireId='+this.$route.query.id,
                  method:'get',
                }).then(function(resp){
                 // console.log('444'+resp)
                  const data1=JSON.stringify(resp.data.data)
                //  console.log('333'+typeof(data1))
                //  console.log('222'+data1)
                  const jsonObj =JSON.parse(data1)
                  var arr=[];
                  for(let i in jsonObj){
                      arr.push(jsonObj[i])
                  }
                  console.log(arr)
                  
              })
        },
    },
    watch: {},
    created() {
      this.getTitle()
     // this.getdata()
    }
  }
</script>
 